<template>
  <div>
    <div id="chartsDOM"></div> 
  </div>
</template>

<script setup>
import {onMounted} from 'vue'
import * as echarts from 'echarts'
import axios from 'axios'
onMounted(()=>{


    // 初始化统计图对象
    var myChart = echarts.init(document.getElementById("chartsDOM"));
    // 显示 loading 动画
    myChart.showLoading(); //echarts 的loading
    // 再得到数据的基础上，进行地图绘制
    // 地图生成器
    // https://datav.aliyun.com/portal/school/atlas/area_selector
    
    axios.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json").then(res => {
      
        console.log(res,"00000000000")



      // 得到结果后，关闭动画
      myChart.hideLoading();
      // 注册地图(数据放在axios返回对象的data中哦)
      echarts.registerMap('ZG', res.data);



      var option = {
        tooltip:{}, //鼠标经过的提示文字
        series: [
          {
            tooltip:{
              // formatter:"{a}",
              formatter:(params)=>{
                  console.log(params.name,"-------")
                  return params.name.substr(0,2)
              }
            },
            name: '中国地图',
            type: 'map',
            map: 'ZG',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
            itemStyle:{
              areaColor:"#219fc6"
            },
            select:{
              itemStyle:{
                 color:"#ff00000",
                 areaColor:"#ff0088",
                 borderColor:"#ff55dd"
              }
            },
            label: {
              show: true
            }
          }
        ]
      };




      myChart.setOption(option);
    })
  
})

</script>
<style lang="less" scoped>
  #chartsDOM{
    width: 920px;
    height:1080px;
  }
</style>
